<!-- 新增记工 -->
<template>
	<view class="page">
		<view class="content p-3">
			<view class="bt-block">
				<bg-cell2 valueColor='#4e5969' label="项目名称" :value="project.projectName"></bg-cell2>
				<bg-cell2 valueColor='#4e5969' label="项目地址" :value="project.projectAddr"></bg-cell2>
				<bg-cell2 valueColor='#4e5969' label="考勤日期" :value="nowTime"></bg-cell2>
				<bg-cell2 valueColor='#4e5969' :border="false" label="考勤员" :value="$store.getters.name"></bg-cell2>
			</view>
		</view>
		<view class="bt-block mx-3 px-2">
			<u--form errorType="toast" labelWidth="80" :labelStyle="{ fontSize: '28rpx' }" labelPosition="left"
				:model="postData" :rules="rules" ref="uForm">

				<u-form-item labelPosition="left" required label="工种" prop="workJobType">
					<view class="form-block">
						<bg-select @select-change='workJobChange' :value.sync="postData.workJobType" :columns="workJobs"
							key="workJobType"></bg-select>
					</view>
				</u-form-item>
				<u-form-item labelPosition="top" required label="选择工人" prop="userIds">
					<view class="flex flex-1" style="flex-wrap: wrap; width: 600rpx;">
						<u-tag v-for="u, idx in selectedUsers" :key="idx" :text="u.userName" bgColor="#FFFFFF"
							color="#4e5969" borderColor="#FFFFFF" :closable="!serialId"
							@close="removeUsers(idx)"></u-tag>
					</view>
				</u-form-item>
				<view class="mb-3" @tap="selectUsers" v-if="!serialId">
					<u--image width="152rpx" height="152rpx" src="/static/images/ui/edu/selectImg1.png"></u--image>
				</view>
				<view class="bt-line-1"> </view>
				<!-- <u-form-item labelPosition="left" required label="工种" prop="type">
					<view class="form-block">
						<bg-select @select-change='workJobChange' :value.sync="postData.type" :columns="workJobs"
							key="type"></bg-select>
					</view>
				</u-form-item> -->
				<view v-if="selectedUsers.length > 1">
					<view class="bt-line-1"> </view>
					<u-form-item labelPosition="left" required label="工作性质" prop="workType">
						<view class="form-block">
							<bg-select :value.sync="postData.workType" :columns="dict.type.work_type"
								key="workType"></bg-select>
						</view>
					</u-form-item>
				</view>
				<view v-if="selectedUsers.length == 1">
					<view class="bt-line-1"> </view>
					<view v-if="selectedUsers[0].salaryType == 1">
						<u-form-item labelPosition="left" required label="工作性质" prop="workType">
							<view class="form-block">
								<bg-select :value.sync="postData.workType" :columns="dict.type.work_type"
									key="workType"></bg-select>
							</view>
						</u-form-item>
					</view>
					<view v-else>
						<u-form-item labelPosition="left" required label="工作性质" prop="workType">
							<view class="form-block">
								<bg-select :value.sync="postData.workType" :columns="workTypeColumns"
									key="workType"></bg-select>
							</view>
						</u-form-item>
					</view>
				</view>
				<!-- <view class="bt-line-1"> </view>
					<u-form-item labelPosition="left" required label="工作性质" prop="workType">
						<view class="form-block">
							<bg-select :value.sync="postData.workType" :columns="dict.type.work_type"
								key="workType"></bg-select>
						</view>
					</u-form-item> -->

				<view class="bt-line-1"> </view>
				<!-- <template v-if="!serialId">
					<u-form-item v-if="postData.workType==1"  labelPosition="left"  label="工价">
						<view class="form-block">
							<view>{{workMoney.wage}}</view>
						</view>
					</u-form-item>
					<u-form-item v-else-if="postData.workType==2"  labelPosition="left"  label="工价">
						<view class="form-block">
							<view>{{workMoney.overtimeWage}}</view>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
				</template> -->
				<template v-if="postData.workType == 1">
					<u-form-item required label="工时设定" prop="workingHours">
						<view class="form-block">
							<!-- <bg-select :value.sync="postData.workingHours"
								:columns="[{ label: '1', value: 1 }, { label: '0.5', value: 0.5 }]"
								key="workingHours"></bg-select> -->
							<bg-select :value.sync="postData.workingHours" :columns="fixedWorkingHours"
								key="workingHours"></bg-select>
							<!-- <u-input style="width: 120rpx;" type="digit" border="none" inputAlign="right"
								v-model="postData.workingHours" placeholder="请输入工时" /> -->
						</view>
						<view>小时</view>
					</u-form-item>
				</template>

				<template v-if="postData.workType == 2">
					<u-form-item labelPosition="left" required label="工时设定" prop="workingHours">
						<view class="form-block">
							<!-- <u-number-box inputWidth="60" :min="0.5" :max="24" v-model="postData.workingHours"
								:step="0.5"></u-number-box> -->
							<!-- <bg-select :value.sync="postData.workingHours" :columns="fixedWorkingHours"
								key="workingHours"></bg-select> -->
							<u-input style="width: 120rpx;" type="digit" border="none" inputAlign="right"
								v-model="postData.workingHours" placeholder="请输入工时" />
							<!-- <text style="line-height: 30px;height: 30px;">工时</text> -->
						</view>
						<view>工时</view>

					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item labelPosition="left" required label="加班费" prop="workSalary">
						<!-- <view class="form-block"> -->

						<u-input style="width: 120rpx;" border="none" inputAlign="right" v-model="postData.workSalary"
							placeholder="请输入加班费用" />
						<text style="line-height: 30px;height: 30px;">元/小时</text>

						<!-- </view> -->
					</u-form-item>
					<view class="bt-line-1"> </view>
				</template>




				<u-form-item required labelWidth="168" labelPosition="top" label="班前影像" prop="beforeWorkImgs">
				</u-form-item>
				<view class="mb-3">
					<bg-upload key="beforeWorkImgs" :value.sync="postData.beforeWorkImgs"
						:propValue="postData.beforeWorkImgsPorp" :propPic="postData.beforeWorkImgList" :count="9"
						defaultPic="/static/images/ui/edu/selectImg2.png"></bg-upload>
				</view>
				<view class="bt-line-1"> </view>
				<u-form-item labelWidth="168" labelPosition="top" label="班后影像">
				</u-form-item>
				<view class="mb-3">
					<bg-upload key="afterWorkImgs" :value.sync="postData.afterWorkImgs" :count="9"
						:propPic="postData.afterWorkImgList" :propValue="postData.afterWorkImgsPorp"
						defaultPic="/static/images/ui/edu/selectImg2.png"></bg-upload>
				</view>
			</u--form>
		</view>
		<view class="bt-footer">
			<bg-btn @click="saveData">确认记工（{{ selectedUsers.length }}共人）</bg-btn>
		</view>
	</view>
</template>

<script>
	import {
		workTypes
	} from '@/utils/constant'
	import {
		saveAttend,
		editAttend,
		getAttend
	} from "@/api/attend.js"
	import {
		projectDetail
	} from '../../../api/project'
	import {
		getWorkTypeList
	} from "@/api/entry.js"

	export default {
		dicts: ['work_type'],
		mounted() {
			uni.$on('selected-users', (e) => {
				console.log(e);
				this.selectedUsers = e
				this.postData.userIds = this.selectedUsers.map(u => u.userId)
			})
			// 原工种小类
			this.getWorkType()
			// this.$store.dispatch("types/getJobs").then(res => {
			// 	this.workJobs = res
			// })
			this.nowTime = this.$u.timeFormat(Date.now(), 'yyyy年mm月dd日')
			this.getProject()
		},
		onLoad(options) {
			this.serialId = options.id
			if (this.serialId) {
				this.getData()
				uni.setNavigationBarTitle({
					title: "编辑"
				})
			}

		},
		data() {
			return {
				serialId: '',
				workMoney: {},
				project: {},
				workJobs: [],
				selectedUsers: [],
				workTypes: workTypes,
				nowTime: '',
				postData: {
					"projectId": this.$store.getters.projectId,
					"userIds": [],
					"type": '',
					"workType": "",
					"workingHours": '',
					"beforeWorkImgs": "",
					"afterWorkImgs": "",
					"workSalary": '',
					"workJobType": ''
				},
				rules: {
					type: [{
						required: true,
						message: "请选择工种"
					}],
					workType: [{
						required: true,
						message: "请选择工作性质"
					}],
					userIds: [{
						required: true,
						message: "请选择用户"
					}],
					beforeWorkImgs: [{
						required: true,
						message: "请上传班前影像"
					}],
					afterWorkImgs: [{
						required: true,
						message: "请上传班后影像"
					}]
				},
				workTypeList: [],
				// fixedWorkingHours: [{
				// 	label: '0.5',
				// 	value: 0.5
				// },
				// {
				// 	label: '1',
				// 	value: 1
				// }, {
				// 	label: '1.5',
				// 	value: 1.5
				// }, {
				// 	label: '2',
				// 	value: 2
				// },
				// {
				// 	label: '2.5',
				// 	value: 2.5
				// },
				// {
				// 	label: '3',
				// 	value: 3
				// },
				// {
				// 	label: '3.5',
				// 	value: 3.5
				// },
				// {
				// 	label: '4',
				// 	value: 4
				// },
				// {
				// 	label: '4.5',
				// 	value: 4.5
				// },
				// {
				// 	label: '5',
				// 	value: 5
				// },
				// {
				// 	label: '5.5',
				// 	value: 5.5
				// },
				// {
				// 	label: '6',
				// 	value: 6
				// },
				// {
				// 	label: '6.5',
				// 	value: 6.5
				// },
				// {
				// 	label: '7',
				// 	value: 7
				// },
				// {
				// 	label: '7.5',
				// 	value: 7.5
				// },
				// {
				// 	label: '8',
				// 	value: 8
				// },
				// {
				// 	label: '8.5',
				// 	value: 8.5
				// },
				// {
				// 	label: '9',
				// 	value: 9
				// },
				// {
				// 	label: '9.5',
				// 	value: 9.5
				// },
				// {
				// 	label: '10',
				// 	value: 10
				// }
				// ],
				fixedWorkingHours: [{
						label: '9',
						value: 9
					},

					{
						label: '10',
						value: 10
					}
				],
				workTypeColumns: [{
						label: '月工',
						value: 1
					},
					{
						label: '加班',
						value: 2
					}
				]

			}
		},
		methods: {
			getData() {
				getAttend(this.serialId).then(res => {
					this.postData = res.data;
					this.selectedUsers = this.postData.userList
					this.selectedUsers.forEach(e => {
						e.nickName = e.userName
					})
					this.postData.userIds = this.selectedUsers.map(u => u.userId)
					this.postData.beforeWorkImgsPorp = this.postData.beforeWorkImgs
					this.postData.afterWorkImgsPorp = this.postData.afterWorkImgs
				})
			},
			getProject() {

				projectDetail(this.$store.getters.projectId).then(res => {
					this.project = res.data
				})
			},
			selectUsers() {
				// 构建传递的参数
				const params = {
					pid: this.$store.getters.projectId,
					jumpTitle: "选择考勤用户",
					workDate: this.nowTime, // 考勤日期
					workType: this.postData.workType, // 工作性质
					workJobType: this.postData.workJobType // 工种
				}

				// 将参数转换为URL查询字符串
				const queryString = Object.keys(params)
					.map(key => `${key}=${encodeURIComponent(params[key])}`)
					.join('&')

				uni.navigateTo({
					url: `/pages/common/user-select/multi-select?${queryString}`,
					success: (res) => {
						res.eventChannel.emit('acceptDataFromOpener', {
							data: this.selectedUsers
						})
					}
				})
			},
			workJobChange(e) {
				let value = e.value[0]
				this.workMoney = value;
			},
			removeUsers(idx) {
				this.selectedUsers.splice(idx, 1)
				this.postData.userIds = this.selectedUsers.map(u => u.userId)
			},
			async saveData() {
				// console.log('this.postData----------', this.postData);
				// return
				if (this.selectedUsers.length == 0) {
					this.$modal.msg("请选择考勤用户")
					return false
				}
				let valid = await this.$refs.uForm.validate()
				let method = saveAttend
				if (this.serialId) {
					method = editAttend
				}
				if (valid) {
					this.postData.workDate = this.nowTime
					method(this.postData).then(res => {
						this.$modal.msg("操作成功")
						uni.$emit("refresh-page", true)
						this.$tab.navigateBackDelay()
					})
				}

			},
			getWorkType() {
				this.workJobs = []
				getWorkTypeList().then(res => {
					let data = res.data
					// 遍历data 将id 变为value type变为label
					data.forEach(e => {
						e.label = e.type
						e.value = e.id
					})

					this.workJobs = data
				})
			}

		}
	}
</script>

<style scoped>
	.page {
		padding-bottom: 180rpx;
	}
</style>